<template>
  <div class="setmeal-index">
    <div class="head">
        <div class="inp-item">
            <label class="name">套餐名称：</label>
            <el-input :clearable="true" v-model="setmealName" placeholder="请填写套餐名称" @clear="getSetmeal"></el-input>
        </div>
        <div class="inp-item">
            <label class="name">套餐分类</label>
            <el-select :clearable="true" v-model="selectSetmealValue" placeholder="请选择" @clear="getSetmeal">
                <el-option v-for="item in selectSetmealOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>
        <div class="inp-item">
            <label class="name">售卖状态</label>
            <el-select :clearable="true" v-model="selectStatusValue" placeholder="请选择" @clear="getSetmeal">
                <el-option v-for="item in selectStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>
        <div class="btn" @click="getSetmeal">查询</div>
        <div class="right">
            <span @click="handleDelete(setmealIds)">批量删除</span>
            <div @click="$router.push('/setmeal/add')" class="add">+ 新建套餐</div>
        </div>
    </div>
    <div v-if="setmealList.length !== 0" class="main">
        <el-table :data="setmealList" @selection-change="handleSelectSetmeal">
            <el-table-column min-width="30" type="selection"></el-table-column>
            <el-table-column min-width="196" label="套餐名称" prop="name"></el-table-column>
            <el-table-column min-width="192" label="图片">
                <template slot-scope="scope">
                    <img class="pic" :src="scope.row.image" alt="">
                </template>
            </el-table-column>
            <el-table-column min-width="192" label="套餐分类" prop="categoryName"></el-table-column>
            <el-table-column min-width="192" label="套餐价格" align="center">
                <template slot-scope="scope">￥{{ scope.row.price }}</template>
            </el-table-column>
            <el-table-column min-width="192" label="售卖状态" align="center" prop="status">
                <template slot-scope="scope">
                    <div class="tableColumn-status" :class="{ active: scope.row.status === 1 }">
                        <span>{{ scope.row.status === 1 ? '启售' : '停售' }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column min-width="193" label="最后操作时间" prop="updateTime"></el-table-column>
            <el-table-column align="center" min-width="250" label="操作" class-name="operate">
                <template slot-scope="scope">
                <button
                    class="btn"
                    @click="$router.push(`/setmeal/add?id=${scope.row.id}`)">修改</button>
                <button
                    class="btn red"
                    @click="handleDelete([scope.row.id])">删除</button>
                <button
                    v-if="scope.row.status === 0"
                    class="btn"
                    @click="handleChangeStatus(scope.row.id, scope.row.status)">启售</button>
                <button
                    v-else
                    class="btn red"
                    @click="handleChangeStatus(scope.row.id, scope.row.status)">停售</button>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginate">
            <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 40]"
            :total="pageTotal"
            :page-size.sync="pageSize"
            :current-page.sync="page"
            @size-change="getSetmeal()"
            @current-change="getSetmeal()"
            ></el-pagination>
        </div>
    </div>
    <div v-else class="main">
        <div class="empty">
            <img class="empty-pic" src="@/assets/search_table_empty.png" alt="">
            <span class="hint">这里空空如也~</span>
        </div>
    </div>
  </div>
</template>

<script>
import { getSetmeal, changeStatus, deleteSetmeal } from '@/api/setmeal'
export default {
  name: 'SetmealIndex',
  data () {
    return {
      selectSetmealValue: null,
      selectSetmealOptions: [
        { value: 13, label: '人气套餐' },
        { value: 15, label: '商务套餐' }
      ],
      selectStatusValue: null,
      selectStatusOptions: [
        { value: 0, label: '停售' },
        { value: 1, label: '启售' }
      ],
      setmealName: null,
      setmealList: [],
      page: 1,
      pageSize: 10,
      pageTotal: 0,
      setmealIds: ''
    }
  },
  created () {
    this.getSetmeal()
  },
  methods: {
    async getSetmeal () {
      const res = await getSetmeal({
        categoryId: this.selectSetmealValue,
        name: this.setmealName,
        page: this.page,
        pageSize: this.pageSize,
        status: this.selectStatusValue
      })
      if (res.code === 1) {
        this.setmealList = res.data.records
        this.pageTotal = res.data.total
      }
    },
    handleChangeStatus (id, status) {
      this.$confirm('确认更改该套餐状态？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        const res = await changeStatus(id, status === 1 ? 0 : 1)
        if (res.code === 1) {
          this.getSetmeal()
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {})
    },
    handleDelete (ids) {
      this.setmealIds = typeof ids === 'string' ? ids : ids.join(',')
      this.$confirm('确定删除该套餐？', '提示', {
        confirmButtonText: '删除'
      }).then(async () => {
        const res = await deleteSetmeal(this.setmealIds)
        if (res.code === 1) {
          this.getSetmeal()
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {})
    },
    handleSelectSetmeal (setmeals) {
      const ids = []
      setmeals.forEach(item => {
        ids.push(item.id)
      })
      this.setmealIds = ids.join(',')
    }
  }
}
</script>

<style lang="less" scoped>
.setmeal-index {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;

    .head {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        gap: 15px;
        color: #333;

        .inp-item {
            display: flex;
            align-items: center;
            gap: 5px;

            .name {
                flex-shrink: 0;
            }
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #333;
            color: #fff;
            border-radius: 5px;
            padding: 0 20px;
            cursor: pointer;
            line-height: 0;

            &:hover {
              background-color: #666;
            }

            &:active {
              background-color: #333;
            }
        }

        .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;

            span {
                color: #f56c6c;
                cursor: pointer;
            }

            .add {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 40px;
                border-radius: 5px;
                padding: 0 20px;
                background-color: #ffc200;
                cursor: pointer;
            }
        }
    }

    .main {
        width: calc(100% - 5px);
        margin-top: 20px;

        .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            margin-top: 200px;
            padding-bottom: 100px;

            .empty-pic {
                width: 250px;
                height: auto;
            }

            .hint {
                font-size: 14px;
                color: #666;
            }
        }
    }
}
</style>
